<template>
  <div class="search-page">
      <h1>搜索框ts版</h1> 
      <!-- 你也可以不写组件 直接写在同一个页面 正常操作 -->
      <Search @change="chage" @clear="qingchu" v-model="data.value"/>
      <!-- 搜索结果  想好看就自己写了 -->
      <div class="list">
        <div class="list-li" :key="index" v-for="(item,index) in data.resList">{{item}}</div>
      </div>
  </div>
</template>

<script setup lang="ts">
import { ref,reactive } from "vue"
import Search from "@/components/search/index.vue"
import {customList} from "./data"
const data = reactive({
  value:"",
  resList:[]
})

const chage = ()=>{
  // 1.我们根据我们拿到的结果 进行筛选
  chazhao(data.value)
}
const chazhao = (value:string)=>{
  data.resList = []
  const _arr = customList.reduce((acc,cur)=>{
    if(cur.indexOf(value) !== -1){
      acc.push(cur)
    }
    return acc
  },[])
  data.resList = _arr
}
const qingchu =()=>{
  data.resList = []
}
</script>

<style lang="less" scoped>
.search-page{
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  h1{
    font-size: 24px;
    margin-bottom: 10px;
  }
  .list{
    margin-top: 20px;
  }
  .list-li{
    line-height: 24px;
    padding: 0 8px;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
  }
}
</style> 
